<template>
    <el-container>
        <div class="my-content" :style="contextSize">
            <router-view></router-view>
        </div>
        <span class="my-split-line">
        </span>
        <el-aside class="my-navi-bar" width="220px">
            <el-menu router :default-openeds="menusExpanded">
                <el-submenu v-for="(dir,i) in $router.options.routes" :index="i.toString()" :key="i">
                    <template slot="title"><i class="el-icon-menu"></i>{{ dir.name }}</template>
                    <el-menu-item v-for="(child, j) in dir.children"
                                  :index="child.path"
                                  :key="j"
                                  :class="child.name === $route.name?'is-active':'' ">
                        <i class="el-icon-location"></i> {{ child.name }}
                    </el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-location"></i><span>导航2</span>
                    </template>
                    <el-menu-item-group>
                        <template slot="title">分组A</template>
                        <el-menu-item index="2-1">页面2-1</el-menu-item>
                        <el-menu-item index="2-2">页面2-2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组B">
                        <el-menu-item index="2-3">页面2-3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="2-4">
                        <template slot="title">页面2-4</template>
                        <el-menu-item index="2-4-1">子页面2-4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>
    </el-container>
</template>

<script>
import '@/assets/styles/global.styl'

export default {
    name: 'App',
    components: {},
    data() {
        return {
            menusExpanded: ['0', '1'],
            contextSize: {
                height: '0',
            },
        }
    },
    created() {
        window.addEventListener('resize', this.updateHeight);
        this.updateHeight();
    },
    methods: {
        updateHeight() {
            this.contextSize.height = String(window.innerHeight) + 'px';
        },
    },
}
</script>

<style lang="stylus" scoped>
.my-content
    position: fixed
    //border: 5px solid yellow
    top: 0
    left: 0
    right: 226px
.my-split-line
    position: fixed
    right: 225px
    height: 100%
    border-color: lightgrey
    border-width: thin
    border-style: none none none solid
.my-navi-bar
    position: absolute
    top: 5px
    right: 5px
</style>
